<template>
    <div class="com-container">
        <div class="com-chart" id="com-chart" ref="stock_ref"></div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, inject, computed, watch } from "vue";
import * as echarts from "echarts";
//vuex
import { useStore } from "vuex";
const store = useStore();
import SocketService from "./../utils/socket_service";

let allData = ref(null);
let chartInstance = null;
const stock_ref = ref(null);
let currentIndex = ref(0); //当前数组
let timer = null;
//定时器
const startInterval = () => {
    if (timer) {
        clearInterval(timer);
    }
    timer = setInterval(() => {
        currentIndex.value++;
        if (currentIndex.value > 1) {
            currentIndex.value = 0;
        }
        upDataChart(); //跟新图表
    }, 5000);
};

//初始化
const initChart = () => {
    //挂载chart
    chartInstance = echarts.init(stock_ref.value, theme.value);
    /** @type EChartsOption */
    const initOption = {
        title: {
            text: "| 库存和销量分析",
            left: 20,
            top: 20,
        },
    };
    chartInstance.setOption(initOption);
    chartInstance.on("mouseover", () => {
        clearInterval(timer);
    });
    chartInstance.on("mouseout", () => {
        startInterval();
    });
};
//更新
const getData = async (ret) => {
    // 获取数据
    // const { data: ret } = await inject("http").get("/api/stock");
    allData.value = ret;
    console.log(allData.value);
    upDataChart();
    startInterval();
};
//获取数据
const upDataChart = () => {
    const start = currentIndex.value * 5;
    const end = (currentIndex.value + 1) * 5;
    //处理数据
    const showData = allData.value.slice(start, end);
    const centerArr = [
        ["18%", "40%"],
        ["50%", "40%"],
        ["82%", "40%"],
        ["34%", "75%"],
        ["66%", "75%"],
    ];
    const colorArr = [
        ["#4FF778", "#0BA82C"],
        ["#E5DD45", "#E8B11C"],
        ["#E8821C", "#E55445"],
        ["#5052EE", "#AB6EE5"],
        ["#23E5E5", "#2E72BF"],
    ];
    const seriesArr = showData.map((item, index) => {
        return {
            type: "pie",
            center: centerArr[index],
            // hoverAnimation: false,
            emphasis: { scale: false }, // 去除动画效果
            labelLine: {
                show: false, //指示线
            },
            label: {
                show: true,
                position: "center",
                position: "center",
                formatter: () => {
                    return `${item.name}\n\n${item.sales}`;
                },
                color: colorArr[index][0],
            },
            data: [
                {
                    // name: `${item.name}\n${item.sales}`,
                    value: item.sales,
                    label: {
                        show: false,
                    },
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                            {
                                offset: 0,
                                color: colorArr[index][0],
                            },
                            {
                                offset: 1,
                                color: colorArr[index][1],
                            },
                        ]),
                    },
                },
                {
                    value: item.stock,
                    itemStyle: {
                        color: "#333843",
                    },
                },
            ],
        };
    });
    /** @type EChartsOption */
    const dataOption = {
        series: seriesArr,
    };
    chartInstance.setOption(dataOption);
};
// 响应式适配
const screenAdapt = () => {
    //标题文字
    const titleFontSize = stock_ref.value.offsetWidth * (66 / 1536);
    console.log(titleFontSize);
    const innerRadius = titleFontSize * 2.8;
    const outerRadius = innerRadius * 1.125;
    const adaptOption = {
        title: {
            textStyle: {
                fontSize: titleFontSize,
            },
        },
        series: [
            {
                type: "pie",
                radius: [outerRadius, innerRadius],
                label: {
                    fontSize: titleFontSize / 2,
                },
            },
            {
                type: "pie",
                radius: [outerRadius, innerRadius],
                label: {
                    fontSize: titleFontSize / 2,
                },
            },
            {
                type: "pie",
                radius: [outerRadius, innerRadius],
                label: {
                    fontSize: titleFontSize / 2,
                },
            },
            {
                type: "pie",
                radius: [outerRadius, innerRadius],
                label: {
                    fontSize: titleFontSize / 2,
                },
            },
            {
                type: "pie",
                radius: [outerRadius, innerRadius],
                label: {
                    fontSize: titleFontSize / 2,
                },
            },
        ],
    };
    chartInstance.setOption(adaptOption);
    chartInstance.resize();
};

// 回调函数注册
inject("SocketService").registerCallBack("stockData", getData);
onUnmounted(() => {
    inject("SocketService"), unRegisterCallBack("stockData");
});

onMounted(() => {
    initChart();
    // getData();
    inject("SocketService").send({
        action: "getData",
        socketType: "stockData",
        chartName: "stock",
        value: "",
    });
    window.addEventListener("resize", screenAdapt);
    screenAdapt();
});
onUnmounted(() => {
    window.removeEventListener("resize", screenAdapt);
    clearInterval(timer);
});

//更换主题
const theme = computed(() => {
    return store.state.theme;
});
watch(theme, () => {
    console.log("主题切换了");
    chartInstance.dispose(); //销毁当前图表
    initChart();
    SocketService.Instance.send({
        action: "getData",
        socketType: "stockData",
        chartName: "stock",
        value: "",
    });
    screenAdapt();
    // console.log(theme.value);
});

defineExpose({
    screenAdapt,
});
</script>

<style scoped>
</style>